<template>
	<!-- Hello World! -->
	<div class="back2">
		<div class="rcon1">
			<div class="yuan" @tap="goTo1">
				<div class="y">1</div>
				<div class="inc">第一步</div>
			</div>
			<div class="yuan" @tap="goTo2">
				<div class="y">2</div>
				<div class="inc">第二步</div>
			</div>
			<div class="yuan">
				<div class="y">3</div>
				<div class="inc">第三步</div>
			</div>
		</div>
		
		
		<div class="ti2">
			<div class="org"></div>
			<div class="stu">4.突发事件概述</div>
		</div>
		<div class="aaaa"></div>
		<div class="srk">
			<textarea 
				v-model="eventOverview" 
				placeholder="请输入信息"
				class="tishi"
			></textarea>
		</div>
		
		<div class="ti2">
			<div class="org"></div>
			<div class="stu">5.学生目前情况</div>
		</div>
		<div class="aaaa"></div>
		<div class="srk">
			<textarea 
				v-model="eventOverview" 
				placeholder="请输入信息"
				class="tishi"
			></textarea>
		</div>
		
		<div class="ti2">
			<div class="org"></div>
			<div class="stu">6.风险评估研判</div>
		</div>
		<div class="aaaa"></div>
		<div class="srk">
			<textarea 
				v-model="eventOverview" 
				placeholder="请输入信息"
				class="tishi"
			></textarea>
		</div>
		
		<div class="ti2">
			<div class="org"></div>
			<div class="stu">7.已采取的措施及当前情况</div>
		</div>
		<div class="aaaa"></div>
		<div class="srk">
			<textarea 
				v-model="eventOverview" 
				placeholder="请输入信息"
				class="tishi"
			></textarea>
		</div>
		
		<div class="ti2">
			<div class="org"></div>
			<div class="stu">8.学院建议</div>
		</div>
		<div class="aaaa"></div>
		<div class="srk">
			<textarea 
				v-model="eventOverview" 
				placeholder="请输入信息"
				class="tishi"
			></textarea>
		</div>
		<div class="tishi2">已为您实时保存数据</div>
		<div class="subb">
			<div class="sb">提交审批</div>
		</div>
		<div class="subb2">
			<div class="sb2">保存草稿</div>
		</div>
	</div>
</template>

<script>
	export default 
	{
		methods: 
		{
			goTo1()
			{
				console.log('第一步被点击了！！！');
				uni.navigateTo({url: '/pages/report/report'});
			},
			goTo2() 
			{
				console.log('第二步被点击了！！！');
				uni.navigateTo({url: '/pages/report/report2'});
			}
		}
	}
</script>

<style>
	.subb2
	{
		margin-top: 20rpx;
		margin-left: 20rpx;
		width: 688rpx;
		height: 88rpx;
		border-radius: 12rpx;
		background: white;
		box-shadow: 0 4rpx 8rpx #e6e6e64d;
		  display: flex;
		  justify-content: center;
		  align-items: center;
	}
	.sb2
	{
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 30rpx;
		text-align: center;
		color: #276eff;
	}
	.subb
	{
		margin-top: 20rpx;
		margin-left: 20rpx;
		width: 688rpx;
		height: 88rpx;
		border-radius: 12rpx;
		background: #276eff;
		box-shadow: 0 4rpx 8rpx #e6e6e64d;
		  display: flex;
		  justify-content: center;
		  align-items: center;
	}
	.sb
	{
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 30rpx;
		text-align: center;
		color: #fff;
	}
	.tishi2
	{
		margin-top: 30rpx;
		margin-left: 268rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		font-size: 24rpx;
		text-align: left;
		color: #808080;
	}
	.tishi
	{
		margin-top: 30rpx;
		margin-left: 38rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		font-size: 28rpx;
		text-align: left;
		color: #999;
	}
	.aaaa
	{
		height: 10rpx;
	}
	.back2
	{
		width: 750rpx;
		height: 3278rpx;
		background: #f2f4f7;
	}
	.srk
	{
		width: 682rpx;
		height: 224rpx;
		border-radius: 12rpx;
		background: #fff;
		display: flex;
		margin-left: 38rpx;
	}
	.ti2
	{
		display: flex;
	}
	.stu
	{
		margin-top: 15rpx;
		margin-left: 10rpx;
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 32rpx;
		text-align: left;
		color: #1a1a1a;
	}
	.org
	{
		margin-left: 38rpx;
		margin-top: 20rpx;
		width: 10rpx;
		height: 38rpx;
		background: #ffa216;
	}
	.rcon1
	{
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 750rpx;
		height: 164rpx;
		background: #276EFF;
		position: relative;
	}
	.yuan
	{
		width: 60rpx;
		height: 60rpx;
		background: #fff;
		border: 2rpx solid #fff;
		border-radius: 50%;
	}
	.inc
	{
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 20rpx;
		text-align: center;
		color: #fff;
	}
	.y
	{
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #fff;
		border: 2rpx solid #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #276eff;
		font-weight: bold;
		z-index: 1;
	}
</style>